<template>
  <gui-page ref="guiPage" :fullPage="true" :customHeader="true">
    <template v-slot:gHeader>
      <view class="header">
        <image
          class="header-back"
          src="/static/activity/fanhui btn@2x.png"
          mode="aspectFit"
          @click="goBack"
        ></image>
        <text class="header-title">返回</text>
        <view style="width: 50rpx"></view>
      </view>
    </template>
    <template v-slot:gBody>
      <view style="height: 88rpx"></view>
      <view class="gui-bg-white gui-dark-bg-level-3">
        <view
          id="header"
          class="search-fixed-top gui-bg-white"
          style="padding: 10rpx 30rpx"
        >
          <gui-switch-navigation
            :activeLineClass="['gui-xhs-red']"
            :isCenter="true"
            activeDirection="center"
            textAlign="center"
            :items="tabs"
            :size="150"
            :currentIndex="currentIndex"
            @change="navchange"
          ></gui-switch-navigation>
        </view>

        <view style="height: 88rpx"></view>

        <swiper
          :current="currentIndex"
          @change="swiperChange"
          :style="{ height: swiperHeight + 50 + 'px', width: '750rpx' }"
        >
          <!-- 轮播项目数量对应 上面的选项标签 -->
          <!--<swiper-item>-->
          <!--  <view id="content-wrap1" style="padding: 0 15rpx">-->
          <!--    <gui-empty v-show="friends.length == 0" style="height: 600rpx">-->
          <!--      <template v-slot:img>-->
          <!--        <view class="gui-flex gui-rows gui-justify-content-center">-->
          <!--          <text-->
          <!--            class="gui-icons gui-empty-icon gui-color-gray"-->
          <!--            style="font-size: 80rpx"-->
          <!--            >&#xe611;-->
          <!--          </text>-->
          <!--        </view>-->
          <!--      </template>-->
          <!--      <template v-slot:text>-->
          <!--        <text-->
          <!--          class="gui-block gui-text-center xhs-margin-top-30 gui-color-gray"-->
          <!--          >还没有互相关注的好友~</text-->
          <!--        >-->
          <!--      </template>-->
          <!--    </gui-empty>-->

          <!--    <view-->
          <!--      v-for="(item, index) in friends"-->
          <!--      class="gui-list-items"-->
          <!--      style="padding-left: 30rpx"-->
          <!--    >-->
          <!--      <view class="gui-list-image gui-relative">-->
          <!--        <image-->
          <!--          @tap.stop="goCard(item.authorId)"-->
          <!--          class="gui-list-image"-->
          <!--          style="width: 100rpx; height: 100rpx; border-radius: 100rpx"-->
          <!--          mode="aspectFill"-->
          <!--          :src="item.avatarUrl"-->
          <!--        ></image>-->
          <!--      </view>-->
          <!--      <view class="gui-list-body" style="padding-left: 10rpx">-->
          <!--        <view class="gui-list-title">-->
          <!--          <view class="gui-list-title-text gui-primary-text">{{-->
          <!--            item.authorName-->
          <!--          }}</view>-->
          <!--          <view-->
          <!--            class="gui-list-title-desc gui-bold gui-text-center"-->
          <!--            style="padding-top: 20rpx"-->
          <!--          >-->
          <!--            &lt;!&ndash;<view&ndash;&gt;-->
          <!--            &lt;!&ndash;  v-show="item.isFollow && item.isFollowMe"&ndash;&gt;-->
          <!--            &lt;!&ndash;  @tap="goChat(item)"&ndash;&gt;-->
          <!--            &lt;!&ndash;  class="gui-button-mini xhs-border-radius50 xhs-border-gray"&ndash;&gt;-->
          <!--            &lt;!&ndash;  style="width: 150rpx; margin-right: 20rpx"&ndash;&gt;-->
          <!--            &lt;!&ndash;&gt;&ndash;&gt;-->
          <!--            &lt;!&ndash;  <text class="gui-icons xhs-font24">私信</text>&ndash;&gt;-->
          <!--            &lt;!&ndash;</view>&ndash;&gt;-->

          <!--            &lt;!&ndash;											<view&ndash;&gt;-->
          <!--            &lt;!&ndash;													v-show="!item.isFollow&&item.isFollowMe"&ndash;&gt;-->
          <!--            &lt;!&ndash;													@tap="followAuthor(item)"&ndash;&gt;-->
          <!--            &lt;!&ndash;													type="default"&ndash;&gt;-->
          <!--            &lt;!&ndash;													class="gui-button-mini xhs-border-radius50 xhs-border-pink "&ndash;&gt;-->
          <!--            &lt;!&ndash;													style="width:150rpx;margin-right: 20rpx;">&ndash;&gt;-->
          <!--            &lt;!&ndash;												<text style="color: #E22E4D;" class=" gui-icons xhs-font24">回关</text>&ndash;&gt;-->
          <!--            &lt;!&ndash;											</view>&ndash;&gt;-->

          <!--            &lt;!&ndash;											<view&ndash;&gt;-->
          <!--            &lt;!&ndash;													v-show="!item.isFollow&&!item.isFollowMe"&ndash;&gt;-->
          <!--            &lt;!&ndash;													@tap="followAuthor(item)"&ndash;&gt;-->
          <!--            &lt;!&ndash;													type="default"&ndash;&gt;-->
          <!--            &lt;!&ndash;													class="gui-button-mini xhs-border-radius50 xhs-border-pink"&ndash;&gt;-->
          <!--            &lt;!&ndash;													style="width:150rpx;margin-right: 20rpx;">&ndash;&gt;-->
          <!--            &lt;!&ndash;												<text style="color: #E22E4D;" class="gui-icons xhs-font24">关注</text>&ndash;&gt;-->
          <!--            &lt;!&ndash;											</view>&ndash;&gt;-->

          <!--            &lt;!&ndash;											<view&ndash;&gt;-->
          <!--            &lt;!&ndash;													v-show="item.isFollow&&!item.isFollowMe"&ndash;&gt;-->
          <!--            &lt;!&ndash;													@tap="cancelfollowAuthor(item)"&ndash;&gt;-->
          <!--            &lt;!&ndash;													type="default"&ndash;&gt;-->
          <!--            &lt;!&ndash;													class="gui-button-mini xhs-border-radius50 xhs-border-gray "&ndash;&gt;-->
          <!--            &lt;!&ndash;													style="width:150rpx;margin-right: 20rpx;">&ndash;&gt;-->
          <!--            &lt;!&ndash;												<text class=" gui-icons xhs-font24">已关注</text>&ndash;&gt;-->
          <!--            &lt;!&ndash;											</view>&ndash;&gt;-->
          <!--          </view>-->
          <!--        </view>-->
          <!--        <text-->
          <!--          class="gui-list-body-desc gui-color-gray"-->
          <!--          style="margin-top: -20rpx"-->
          <!--          >{{ item.description }}</text-->
          <!--        >-->
          <!--      </view>-->
          <!--    </view>-->
          <!--  </view>-->
          <!--</swiper-item>-->

          <swiper-item>
            <view id="content-wrap2" style="padding: 0 15rpx">
              <gui-empty v-show="follows.length == 0" style="height: 600rpx">
                <template v-slot:img>
                  <view class="gui-flex gui-rows gui-justify-content-center">
                    <text
                      class="gui-icons gui-empty-icon gui-color-gray"
                      style="font-size: 80rpx"
                      >&#xe611;
                    </text>
                  </view>
                </template>
                <template v-slot:text>
                  <text
                    class="gui-block gui-text-center xhs-margin-top-30 gui-color-gray"
                    >还没有关注任何摇爪哦~</text
                  >
                  <text
                    class="gui-block gui-text-center xhs-margin-top-10 gui-color-gray"
                    >你关注的用户会在这里展示</text
                  >
                </template>
              </gui-empty>

              <view
                v-for="(item, index) in follows"
                class="gui-list-items"
                style="padding-left: 30rpx"
              >
                <view class="gui-list-image gui-relative">
                  <image
                    @tap.stop="goCard(item.authorId)"
                    class="gui-list-image"
                    style="width: 100rpx; height: 100rpx; border-radius: 100rpx"
                    mode="aspectFill"
                    :src="item.avatarUrl"
                  ></image>
                </view>
                <view class="gui-list-body" style="padding-left: 10rpx">
                  <view class="gui-list-title">
                    <view class="gui-list-title-text gui-primary-text">{{
                      item.authorName
                    }}</view>
                    <view
                      class="gui-list-title-desc gui-bold gui-text-center"
                      style="padding-top: 20rpx"
                    >
                      <view
                        v-show="item.isFollow"
                        @tap="cancelfollowAuthor(item)"
                        class="gui-button-mini xhs-border-radius50 xhs-border-gray"
                        style="width: 150rpx; margin-right: 20rpx"
                      >
                        <text class="gui-icons xhs-font24">取消关注</text>
                      </view>

                      <view
                        v-show="!item.isFollow"
                        @tap="followAuthor(item)"
                        type="default"
                        class="gui-button-mini xhs-border-radius50 xhs-border-pink"
                        style="width: 150rpx; margin-right: 20rpx"
                      >
                        <text
                          style="color: #e22e4d"
                          class="gui-icons xhs-font24"
                          >关注</text
                        >
                      </view>
                    </view>
                  </view>
                  <text
                    class="gui-list-body-desc gui-color-gray"
                    style="margin-top: -20rpx"
                    >{{ item.description }}</text
                  >
                </view>
              </view>
            </view>
          </swiper-item>

          <swiper-item>
            <view id="content-wrap3" style="padding: 0 15rpx">
              <gui-empty v-show="fans.length == 0" style="height: 600rpx">
                <template v-slot:img>
                  <view class="gui-flex gui-rows gui-justify-content-center">
                    <text
                      class="gui-icons gui-empty-icon gui-color-gray"
                      style="font-size: 80rpx"
                      >&#xe611;
                    </text>
                  </view>
                </template>
                <template v-slot:text>
                  <text
                    class="gui-block gui-text-center xhs-margin-top-30 gui-color-gray"
                    >还没有被粉丝关注哦~</text
                  >
                </template>
              </gui-empty>

              <view
                v-for="(item, index) in fans"
                class="gui-list-items"
                style="padding-left: 30rpx"
              >
                <view class="gui-list-image gui-relative">
                  <image
                    @tap.stop="goCard(item.authorId)"
                    class="gui-list-image"
                    style="width: 100rpx; height: 100rpx; border-radius: 100rpx"
                    mode="aspectFill"
                    :src="item.avatarUrl"
                  ></image>
                </view>
                <view class="gui-list-body" style="padding-left: 10rpx">
                  <view class="gui-list-title">
                    <view class="gui-list-title-text gui-primary-text">{{
                      item.authorName
                    }}</view>
                    <view
                      class="gui-list-title-desc gui-bold gui-text-center"
                      style="padding-top: 20rpx"
                    >
                      <view
                        v-show="item.isFollow"
                        @tap="cancelfollowAuthor(item)"
                        class="gui-button-mini xhs-border-radius50 xhs-border-gray"
                        style="
                          width: 150rpx;
                          margin-right: 20rpx;
                          text-align: center;
                        "
                      >
                        <text class="gui-icons xhs-font24">取消关注</text>
                      </view>

                      <view
                        v-show="!item.isFollow"
                        @tap="followAuthor(item)"
                        type="default"
                        class="gui-button-mini xhs-border-radius50 xhs-border-pink"
                        style="width: 150rpx; margin-right: 20rpx"
                      >
                        <text
                          style="color: #e22e4d"
                          class="gui-icons xhs-font24"
                          >关注</text
                        >
                      </view>
                    </view>
                  </view>
                  <text
                    class="gui-list-body-desc gui-color-gray"
                    style="margin-top: -20rpx"
                    >{{ item.description }}</text
                  >
                </view>
              </view>
            </view>
          </swiper-item>
        </swiper>
      </view>
    </template>
  </gui-page>
</template>
<script>
import graceJS from "@/Grace6/js/grace.js";
import GuiSwitchNavigation from "@/Grace6/components/gui-switch-navigation-shopping.vue";
import GuiPage from "@/Grace6/components/gui-page.vue";
import commonMixin from "@/mixin/commonMinxin";
import filterUrl from "@/hooks/filterUrl";

export default {
  mixins: [commonMixin],
  components: { GuiPage, GuiSwitchNavigation },
  data() {
    return {
      tabs: [
        // { id: 1, name: "互相关注" },
        { id: 2, name: "关注" },
        { id: 3, name: "粉丝" },
      ],
      authorId: "",
      friends: [],
      follows: [],
      fans: [],
      // 顶部选项卡标签 选中选项的 索引
      currentIndex: 1,
      swiperHeight: 0,
      accessToken: "",
      userId: "",
      queryParams: {},
    };
  },
  onLoad(e) {
    console.log(e);
    this.queryParams = e;
    e.authorId && (this.authorId = e.authorId);
    this.accessToken = e.accessToken;
    this.userId = e.userId;
    e.type && (this.currentIndex = parseInt(e.type));
    uni.setStorageSync("token", e.token);
    uni.setStorageSync("userId", e.authorId);
    this.$nextTick(() => {
      this.getFollowMes();
      this.getMyFollows();
      this.getMyFriends();
    });
  },
  onReachBottom: function () {
    console.log("asdasd");
  },
  mounted: function () {
    var mountedTimer = null;
    if (mountedTimer != null) {
      clearTimeout(mountedTimer);
    }
    mountedTimer = setTimeout(() => {
      // 01. 获取页面主体高度
      graceJS.getRefs("guiPage", this, 0, (ref) => {
        ref.getDomSize("guiPageBody", (e) => {
          this.swiperHeight = e.height - uni.upx2px(110); //导航栏高度
        });
      });
    }, 100);
  },
  methods: {
    goChat(author) {
      return uni.app.goChat(author);
    },
    goCard(authorId) {
      const url = filterUrl(
        "/pages/card/card",
        {
          authorId: authorId,
        },
        this.queryParams,
      );
      console.log(url);
      switch (uni.getSystemInfoSync().platform) {
        case "android":
          let ddd = {
            hideNavBar: "1",
            hideTotalNavBar: "1",
            hideBottomSafeBar: "1",
            url,
          };
          let d = JSON.stringify(ddd);
          console.log(d, "都是对的");
          window.AndroidBridge.pushNewWebVC(d);
          console.log("运行Android上");
          break;
        case "ios":
          window.webkit.messageHandlers.pushNewWebVC.postMessage({
            hideNavBar: "1",
            hideTotalNavBar: "1",
            hideBottomSafeBar: "1",
            url,
          });
          break;
        default:
          console.log("运行在开发者工具上");
          break;
      }
    },
    navchange: function (index) {
      this.currentIndex = index;
    },
    swiperChange: function (e) {
      var index = e.detail.current;
      this.currentIndex = index;
    },
    cancelfollowAuthor(author) {
      uni.app.post(
        "/blog/action/cancelFollowAuthor",
        {
          followAuthorId: author.authorId,
          authorId: uni.getStorageSync("userId"),
        },
        "json",
        "",
        (res) => {
          if (res.code == 2000) {
            author.isFollow = false;
          }
        },
      );
    },
    followAuthor(author) {
      uni.app.post(
        "/blog/action/followAuthor",
        {
          followAuthorId: author.authorId,
          authorId: uni.getStorageSync("userId"),
        },
        "json",
        "",
        (res) => {
          if (res.code == 2000) {
            author.isFollow = true;
          }
        },
      );
    },
    getFollowMes() {
      let that = this;
      uni.app.post(
        "/blog/author/getFollowMes",
        {
          targetAuthorId: this.authorId,
          authorId: uni.getStorageSync("userId"),
        },
        "",
        "",
        (res) => {
          console.log(res);
          this.fans = res.data;
        },
      );
    },
    getMyFollows() {
      let that = this;
      uni.app.post(
        "/blog/author/getMyFollows",
        {
          targetAuthorId: this.authorId,
          authorId: uni.getStorageSync("userId"),
        },
        "",
        "",
        (res) => {
          console.log(res);
          this.follows = res.data;
        },
      );
    },
    getMyFriends() {
      let that = this;
      uni.app.post(
        "/blog/author/getMyFriends",
        {
          targetAuthorId: this.authorId,
          authorId: uni.getStorageSync("userId"),
        },
        "",
        "",
        (res) => {
          console.log(res);
          this.friends = res.data;
        },
      );
    },
    goBack() {
      switch (uni.getSystemInfoSync().platform) {
        case "android":
          window.AndroidBridge.backEvent();
          console.log("运行Android上");
          break;
        case "ios":
          window.webkit.messageHandlers.backEvent.postMessage({});
          break;
        default:
          console.log("运行在开发者工具上");
          break;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.search-fixed-top {
  position: fixed;
  z-index: 999;
  left: 0;
  top: 88rpx;
  width: 100%;
}

.header {
  height: 88rpx;
  width: 750rpx;
  background-color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20rpx;

  .header-back {
    width: 50rpx;
    height: 50rpx;
  }

  .header-title {
    height: 88rpx;
    line-height: 88rpx;
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    flex: 1;
    text-align: left;
  }
}
</style>
